<template>
  <div>
    <Table
      class="monitor-table"
      :columns="colData"
      :data="showTableData"
      :height="tableHeight"
      highlight-row
      @on-current-change="handleRowChange"
      @on-row-dblclick="handleTableClick"
    ></Table>
    <Modal
      class="table-detail-xxx"
      :styles="{top: '180px'}"
      v-model="isShowModal"
      width="1080"
    >
      <p slot="header" style="height:30px;line-height:30px;font-size:24px;">
        <span>{{eventDetailTitle}}</span>
      </p>
      <div style="height: 100%;">
        <img v-if="showImgVideo" :src="eventDetailData.http_url_image" width="100%" height="100%"/>
        <Mp4VideoPlayer v-else :src="eventDetailData.http_url_video"></Mp4VideoPlayer>
      </div>
      <div slot="footer" >
        <Button type="success" size="large" @click="showEventImg">显示图片</Button>
        <Button v-if="eventDetailData.video_path!=='' && eventDetailData.video_path!=='null'" type="warning" size="large" @click="showEventVideo">播放视频</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Mp4VideoPlayer from "@/components/myvideo/Mp4VideoPlayer";

export default {
  name: "eventsTable",
  components: {
    Mp4VideoPlayer
  },
  props: {
    tableData: {
      type: Array
    },
    tableHeight: {
      type: String,
      default: '440'
    }
  },
  data() {
    return {
      // 弹出 对话框 显示事件详情
      eventDetailData: {},
      isShowModal: false, // 是否显示对话框
      showImgVideo: true, // true 为图片，false 为视频
      colData: [
        { title: "发生时间", key: "datetime", width: "220", align: "center" },
        { title: "事件名称", key: "action", width: "auto", align: "center" },
        { title: "事件状态", key: "level", width: "120", align: "center" },
        {
          title: "事件详情",
          key: "detail",
          width: "120",
          align: "center",
          render: (h, params) => {
            // console.log('params:',params )
            return h("Button",
              {
                props: {
                  type: params.row.video_path === '' || params.row.video_path === 'null' ? "warning":"success",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    console.log('params:',params)
                    this.eventDetailData = params.row
                    this.isShowModal = true
                    this.showImgVideo = true
                  }
                }
              },
              "查看详情",
            );
          }
        }
      ]
    };
  },
  computed: {
    showTableData() {
      return this.tableData.map(ele => {
        let cellClassName = ''
        if(ele.level === '合规'){
          cellClassName = "demo-table-info-cell-legal"
        }else if(ele.level === '轻度违规'){
          cellClassName = "demo-table-info-cell-illegal-1"
        }else if(ele.level === '中度违规'){
          cellClassName = "demo-table-info-cell-illegal-2"
        }else if(ele.level === '重度违规'){
          cellClassName = "demo-table-info-cell-illegal-3"
        }

        ele.cellClassName = {
          status: cellClassName,
          category: cellClassName,
          cause: cellClassName,
          action: cellClassName,
          level: cellClassName
        }
        return ele
      });
    },
    eventDetailTitle() {
      return this.eventDetailData.action + ' - ' + this.eventDetailData.cause + ' - ' + this.eventDetailData.datetime
    }
  },
  methods: {
    handleTableClick(row, index) {
      this.eventDetailData = row
      this.isShowModal = true
      this.showImgVideo = true
    },
    handleRowChange(currentRow, oldCurrentRow){
      // console.log('单击行：', currentRow, oldCurrentRow)
    },
    showEventImg() {
      this.showImgVideo = true
    },
    showEventVideo() {
      this.showImgVideo = false
    }
  }
};
</script>

<style lang="less">
@table-background-color: #0a4271 !important;

.monitor-table .ivu-table {
  color: #fff;
  font-size: 16px;
  background-color: #01237c;
  overflow-x: hidden;
  overflow-y: hidden;
}
// 表格字体
.monitor-table .ivu-table td {
  font-size: 16px ;
  font-weight: bold;
}
// 表格头的字体
.monitor-table .ivu-table th {
  background-color: @table-background-color;
  font-size: 18px;
  font-weight: bold;
  height: 42px;
}
.monitor-table .ivu-table-wrapper {
  border: 1px solid @table-background-color;
}
.monitor-table .ivu-table:after {
  background-color: @table-background-color;
}
.monitor-table .ivu-table td,.ivu-table th {
  border-bottom: 1px solid @table-background-color;
}
// 合规
.monitor-table .ivu-table .demo-table-info-cell-legal {
  color: #13c2c2;
  font-weight: bold;
}
// 轻度违规
.monitor-table .ivu-table .demo-table-info-cell-illegal-1 {
  color: #fff566;
  font-weight: bold;
}
// 中度违规
.monitor-table .ivu-table .demo-table-info-cell-illegal-2 {
  color: #faad14;
  font-weight: bold;
}
// 重度违规
.monitor-table .ivu-table .demo-table-info-cell-illegal-3 {
  color: #fa541c;
  font-weight: bold;
}
// 违规
.monitor-table .ivu-table .demo-table-info-cell-illegal {
  color: #ffec3d;
  font-weight: bold;
}
.monitor-table .ivu-table-row-highlight td {
  background-color: #36cfc9 !important;
}
// .monitor-table .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td{
//   background-color: #3A5683;
// }
.table-detail-xxx .ivu-icon-ios-close {
  font-size: 41px !important;
}
.table-detail-xxx .ivu-modal-body {
  padding: 2px 10px;
}
</style>
